<template>
  <div>
    <div style="display: flex; justify-content: space-between; background-color: #fff; padding: 20px">
      <a-space>
        <span>时间范围：</span>
        <a-radio-group buttonStyle="solid" v-model="queryParam.timeType" class="area-linkage" @change="redioChange">
          <a-radio-button v-for="(item, key) in optionsTimes" :key="key" :value="item.value">
            {{ item.text }}
          </a-radio-button>
        </a-radio-group>
        <a-range-picker
          v-show="queryParam.timeType === 0"
          :allowClear="true"
          v-model="rangePickerTimes"
          valueFormat="YYYY-MM-DD"
          :disabled-date="disabledDate"
          @change="rangePickerChange"
          @calendarChange="calendarPriceRangeChange"
          style="width: 14vw"
        />
      </a-space>
      <a-space>
        <a-button type="primary" @click="onQuery">确 定</a-button>
        <a-button @click="onReset">重 置</a-button>
      </a-space>
    </div>
    <div class="platform_smuggle_num">
      <div class="platform_title">告警数据统计</div>
      <a-row type="flex" style="justify-content: space-evenly">
        <a-col v-for="(item, i) in smuggleDatas" :key="i">
          <a-card bordered>
            <template slot="cover">
              <div class="cover-left">
                <h4>{{ item.platform }}</h4>
                <h3>{{ item.total }}</h3>
              </div>
              <div class="cover-right">
                <img height="40" :src="item.ico" style="max-width: 100px" />
              </div>
            </template>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-row :gutter="[8, 8]">
      <a-col :span="12">
        <a-card title="告警动态类型占比">
          <div>
            <a-radio-group v-model="category.option1" @change="getQueryDynamicTypeRatio">
              <a-radio-button :value="1"> 数据来源</a-radio-button>
              <a-radio-button :value="2">告警类型</a-radio-button>
            </a-radio-group>
          </div>
          <sm-pie
            :data="graphOption1.data"
            :color="graphOption1.color"
            :hollowCenterText="graphOption1.hollowCenterText"
            legendRight="2%"
            class="graph-box min"
            hollow
            v-if="graphOption1.data.length > 0"
          />
          <div class="graph-box min" v-else><a-empty /></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="告警处置状态占比">
          <sm-pie
            :data="graphOption2.data"
            :color="graphOption2.color"
            labelLine
            class="graph-box"
            v-if="graphOption2.data.length > 0" 
          />
          <div class="graph-box" v-else><a-empty /></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="发布区域告警数量排行  TOP7">
          <sm-rank-bar
            v-if="graphOption3.data.length>0"
            class="graph-box"
            :data="graphOption3.data"
            :barWidth="30"
          />
          <div class="graph-box" v-else><a-empty /></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="告警数量排行   TOP7">
          <div style="margin-bottom: 6px;">
            <a-radio-group v-model="category.option2" @change="getQueryWarnTop">
              <a-radio-button :value="1">网站告警</a-radio-button>
              <a-radio-button :value="2">账户告警</a-radio-button>
              <a-radio-button :value="3">告警关键词</a-radio-button>
            </a-radio-group>
          </div>
          <sm-rank-bar-transverse
            v-if="graphOption4.data.length>0"
            class="graph-box min1"
            :data="graphOption4.data"
            :color="graphOption4.color"
            :barWidth="6"
            orderShow
          />
          <div class="graph-box min1" v-else><a-empty /></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="数据来源告警变化趋势">
          <sm-line
              class="graph-box"
              :data="graphOption5.data"
              legend
              legendPositon="center"
              :color="graphOption5.color"
              v-if="graphOption5.data.length > 0"
            />
          <div class="graph-box" v-else><a-empty /></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="走私类型告警变化趋势">
          <sm-line
              class="graph-box"
              :data="graphOption6.data"
              legend
              legendPositon="center"
              :color="graphOption5.color"
              v-if="graphOption6.data.length > 0"
            />
          <div class="graph-box" v-else><a-empty /></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as analysisApi from '@/api/smuggle/analysis.js'
import SmLine from '@/components/echarts/smLine.vue'
import smPie from '@/components/echarts/smPie.vue'
import smRankBar from '@/components/echarts/smRankBar.vue'
import smRankBarTransverse from '@/components/echarts/smRankBarTransverse.vue'
import moment from 'moment'
export default {
  components: {SmLine, smPie, smRankBar, smRankBarTransverse},
  data() {
    return {
      queryParam: {
        timeType: 2,
        startTime: '', 
        endTime: ''
      },
      rangePickerTimes: [],
      // 1：昨天 2：今天 3：近三天 4：近七天 5：近一个月 6：近一个季度 7：近一年
      optionsTimes: [
        { value: 2, text: '今天' },
        { value: 3, text: '近三天' },
        { value: 4, text: '近七天' },
        { value: 0, text: '自定义' },
      ],
      selectPriceDate: '',
      offsetDays: 86400000 * 365, //最多选择365天【一年】
      smuggleDatas: [
        { platform: '区域告警', platformKey: 'warnNum', total: '0', ico: require('@/assets/icon/alarm1.png') },
        { platform: '物品告警', platformKey: 'goodsNum', total: '0', ico: require('@/assets/icon/alarm3.png') },
        { platform: '账户告警', platformKey: 'accountNum', total: '0', ico: require('@/assets/icon/alarm4.png') },
        { platform: '网站告警', platformKey: 'urlNum', total: '0', ico: require('@/assets/icon/alarm2.png') },
      ],
      category: {
        option1: 1,
        option2: 1
      },
      graphOption1: {
        data: [],
        hollowCenterText: '',
        color: ['#00a2ff', '#00cece', '#00ce7a', '#ffd136', '#ff5873', '#a05de2', '#ff9502']
      },
      graphOption2: {
        data: [],
        color: ['#009cd9', '#18cff9']
      },
      graphOption3: {
        data: [],
      },
      graphOption4: {
        data: [],
        color: ['#6098d2']
      },
      graphOption5: {
        data: [],
        color: ['#00a2ff', '#00cece', '#ffd550', '#ff934a', '#ff6c6d', '#ff74c2', '#c7468e']
      },
      graphOption6: {
        data: []
      }
    }
  },
  mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.getQuerySmuSummaryCount()
      this.getQueryDynamicTypeRatio()
      this.getQueryDispose()
      this.getQueryAreaWarn()
      this.getQueryWarnTop()
      this.getQuerySmuDataSource()
      this.getQuerySmuWarnType()
    },
    onReset() {
      this.$set(this.queryParam, 'timeType', 2)
      this.$set(this.queryParam, 'startTime', '')
      this.$set(this.queryParam, 'endTime', '')
      this.rangePickerTimes = []
      this.onQuery()
    },
    // 头部汇总数据
    getQuerySmuSummaryCount() {
      analysisApi.querySmuSummaryCount(this.queryParam).then(res=>{
        if(res.success) {
          let data = res.result
          for(let key in data){
            let num = data[key].num? data[key].num: 0
            for(let item of this.smuggleDatas){
              if(key===item.platformKey) {
                this.$set(item, 'total', num)
              } 
            }
          }
        }
      }).catch((e) => {
        this.$message.error('出错了')
      })
    },
    // 告警动态类型占比
    getQueryDynamicTypeRatio() {
      let obj = Object.assign({}, {category: this.category.option1}, this.queryParam)
      analysisApi.queryDynamicTypeRatio(obj).then(res=>{
        if(res.success) {
          let data = res.result.map(item=>{
            return {
              product: item.label,
              ratio: item.radio + '%',
              count: item.value,
            }
          });
          this.graphOption1.data = data;
          this.graphOption1.hollowCenterText = this.countTotal(data, 'count');
        }
      }).catch((e) => {
        this.$message.error('出错了')
      })
    },
    // 告警处置状态占比
    getQueryDispose() {
      analysisApi.queryDispose(this.queryParam).then(res=>{
        if(res.success) {
          let data = res.result.map(item=>{
            return {
              product: item.label,
              ratio: item.radio + '%',
              count: item.value,
            }
          })
          this.graphOption2.data = data
        }
      }).catch((e) => {
        this.$message.error('出错了')
      })
    },
    // 发布区域告警数量排行 TOP7
    getQueryAreaWarn() {
      analysisApi.queryAreaWarn(this.queryParam).then(res=>{
        if(res.success) {
          let data = res.result.map(item=>{
            return {
              product: item.label,
              '数量': item.value,
            }
          })
          this.graphOption3.data = data
        }
      }).catch((e) => {
        this.$message.error('出错了')
      })
    },
    // 告警数量排行   TOP7
    getQueryWarnTop() {
      let obj = Object.assign({}, {category: this.category.option2}, this.queryParam)
      analysisApi.queryWarnTop(obj).then(res=>{
        if(res.success) {
          let result = res.result;
          let data = [];
          for(let i in result) {
            let j = Number(i)+1;
            data[0] = ['product', 'nums'];
            data[j] = [result[i].label, result[i].value];
          }
          this.graphOption4.data = data
        }
      }).catch((e) => {
        this.$message.error('出错了')
      })
    },
    // 数据来源告警变化趋势
    getQuerySmuDataSource() {
      analysisApi.querySmuDataSource(this.queryParam).then(res=>{
        if(res.success) {
          let result = res.result;
          let data = [];
          for(let i in result) {
            let obj1 = {product: result[i].date}
            let obj2 = {}
            result[i].valueList.map(item=> {
              obj2[item.label] = item.value
            })
            data[i] = Object.assign({}, obj1, obj2);
          }
          this.graphOption5.data = data
        }
      }).catch((e) => {
        this.$message.error('出错了')
      })
    },
    // 走私类型告警变化趋势
    getQuerySmuWarnType() {
      analysisApi.querySmuWarnType(this.queryParam).then(res=>{
        if(res.success) {
          let result = res.result;
          let data = [];
          for(let i in result) {
            let obj1 = {product: result[i].date}
            let obj2 = {}
            result[i].valueList.map(item=> {
              obj2[item.label] = item.value
            })
            data[i] = Object.assign({}, obj1, obj2);
          }
          this.graphOption6.data = data
        }
      }).catch((e) => {
        this.$message.error('出错了')
      })
    },
    // 选择时间范围类型
    redioChange(e) {
      if(e && e.target.value!=0) {
        this.rangePickerTimes = []
        this.$set(this.queryParam, 'startTime', '')
        this.$set(this.queryParam, 'endTime', '')
      }
    },
    // 自定义时间
    rangePickerChange(date) {
      this.$set(this.queryParam, 'startTime', date[0])
      this.$set(this.queryParam, 'endTime', date[1])
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate(current) {
      if (this.selectPriceDate) {
        let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
        // 选择日期不能小于当天，且可选择自定义offsetDays值范围内的天数
        return (
          current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
          current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD')
          // || current > moment(new Date(), 'YYYY-MM-DD')
        )
      } else {
        return false
        // return current && current > moment().endOf('day')
      }
    },
    //选择开始时间/结束时间
    calendarPriceRangeChange(date) {
      this.selectPriceDate = date[0]
      if (date.length > 1) {
        //选择完时间 清空限制
        this.selectPriceDate = ''
      }
      // console.log(this.selectPriceDate)
    },
    //计算对象数组中某个属性合计
    countTotal(arr, keyName) {
      let $total = 0;
      $total = arr.reduce(function (total, currentValue, currentIndex, arr){
          return currentValue[keyName] ? (total + currentValue[keyName]) : total;
      }, 0);
      return $total;
    }
  },
}
</script>
<style lang="less" scoped>
.platform_smuggle_num {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding-top: 16px;
  margin: 10px 0;
  .platform_title {
    padding: 0 20px 16px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px #e8e8e8 solid;
    margin-bottom: 16px;
  }
  /deep/.ant-card {
    min-width: 220px;
    max-width: 220px;
    margin: 0 auto 20px;
  }
  /deep/.ant-card-cover {
    display: flex;
    justify-content: space-between;
    h4 {
      font-size: 14px;
      font-weight: 500;
    }
    h3 {
      font-size: 20px;
    }
    .cover-left {
      padding: 10px 10px 0 10px;
    }
    .cover-right {
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      img {
        background-color: #4b91ff;
        border-radius: 4px;
      }
      .anticon {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  /deep/.ant-card-body {
    padding: 6px;
    border-top: 1px solid #e8e8e8;
    .ant-card-meta-description {
      color: #666;
    }
  }
}
.graph-box {
  height: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  &.min {
    height: 268px;
  }
  &.min1 {
    height: 263px;
  }
}
</style>
